<template>
  <div class="data-preview">
    <div class="preview-header">
      <div class="preview-title">
        <i class="fas fa-table"></i>
        <span>数据预览</span>
      </div>
      <div class="preview-controls">
        <button class="refresh-btn" @click="refreshData">
          <i class="fas fa-sync-alt"></i>
          <span>刷新数据</span>
        </button>
        <div class="data-stats">
          <div class="stat-item">
            <i class="fas fa-database"></i>
            <span>{{ totalRecords }} 条记录</span>
          </div>
          <div class="stat-item">
            <i class="fas fa-columns"></i>
            <span>{{ columns.length }} 个字段</span>
          </div>
        </div>
      </div>
    </div>

    <div class="preview-content">
      <table class="preview-table">
        <thead>
          <tr>
            <th v-for="column in columns" :key="column.name">
              <div class="column-header">
                <span>{{ column.name }}</span>
                <span class="column-type">{{ column.type }}</span>
              </div>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, index) in currentPageData" :key="index">
            <td v-for="column in columns" :key="column.name">
              <div class="cell-content" :class="getCellClass(row[column.name])">
                {{ formatCellValue(row[column.name]) }}
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="preview-footer">
      <div class="pagination">
        <button
          class="pagination-btn"
          :disabled="currentPage === 1"
          @click="changePage(currentPage - 1)"
        >
          <i class="fas fa-chevron-left"></i>
        </button>
        <div class="page-info">
          第 {{ currentPage }} 页 / 共 {{ totalPages }} 页
        </div>
        <button
          class="pagination-btn"
          :disabled="currentPage === totalPages"
          @click="changePage(currentPage + 1)"
        >
          <i class="fas fa-chevron-right"></i>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      columns: [
        { name: 'customer_id', type: 'BIGINT' },
        { name: 'full_name', type: 'VARCHAR(100)' },
        { name: 'email', type: 'VARCHAR(100)' },
        { name: 'province', type: 'VARCHAR(50)' },
        { name: 'city', type: 'VARCHAR(50)' },
        { name: 'registration_date', type: 'TIMESTAMP' },
        { name: 'customer_level', type: 'INT' }
      ],
      data: Array.from({ length: 85 }, (_, i) => ({
        customer_id: 1000 + i,
        full_name: `客户 ${i + 1}`,
        email: `customer${i + 1}@example.com`,
        province: ['北京', '上海', '广州', '深圳', '杭州'][i % 5],
        city: ['朝阳区', '浦东新区', '天河区', '南山区', '西湖区'][i % 5],
        registration_date: new Date(Date.now() - Math.random() * 1000 * 60 * 60 * 24 * 365 * 3).toISOString(),
        customer_level: Math.floor(Math.random() * 5) + 1
      }))
    };
  },
  computed: {
    totalRecords() {
      return this.data.length;
    },
    totalPages() {
      return Math.ceil(this.data.length / this.pageSize);
    },
    currentPageData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.data.slice(start, end);
    }
  },
  methods: {
    refreshData() {
      // 模拟数据刷新
      console.log('数据已刷新');
    },
    changePage(page) {
      this.currentPage = page;
    },
    formatCellValue(value) {
      if (value === null || value === undefined) {
        return '-';
      }
      if (typeof value === 'boolean') {
        return value ? '是' : '否';
      }
      if (value instanceof Date) {
        return value.toLocaleDateString();
      }
      return value;
    },
    getCellClass(value) {
      if (value === null || value === undefined) {
        return 'empty-cell';
      }
      if (typeof value === 'boolean') {
        return 'boolean-cell';
      }
      if (typeof value === 'number') {
        return 'number-cell';
      }
      if (value instanceof Date) {
        return 'date-cell';
      }
      return '';
    }
  }
};
</script>

<style scoped>
.data-preview {
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-color);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.preview-header {
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--header-bg);
}

.preview-title {
  font-size: 1.4rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
}

.preview-title i {
  color: var(--step-4-color);
}

.preview-controls {
  display: flex;
  align-items: center;
  gap: 30px;
}

.refresh-btn {
  padding: 10px 20px;
  border-radius: 8px;
  background: var(--highlight-color);
  color: var(--step-1-color);
  border: none;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.refresh-btn:hover {
  background: color-mix(in srgb, var(--highlight-color) 80%, white);
  transform: translateY(-2px);
}

.data-stats {
  display: flex;
  gap: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-text);
  font-size: 0.95rem;
}

.stat-item i {
  color: var(--step-2-color);
}

.preview-content {
  flex: 1;
  overflow: auto;
  padding: 0 20px;
}

.preview-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.preview-table th {
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
  padding: 12px;
  text-align: left;
  border-bottom: 2px solid var(--border-color);
}

.column-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.column-type {
  font-size: 0.8rem;
  color: var(--gray-text);
  font-weight: normal;
}

.preview-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border-color);
}

.cell-content {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.9rem;
}

.empty-cell {
  color: #999;
  font-style: italic;
}

.boolean-cell {
  font-weight: 500;
}

.number-cell {
  font-family: 'Roboto Mono', monospace;
  text-align: right;
}

.date-cell {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.85rem;
}

.preview-footer {
  padding: 15px 20px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: center;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 15px;
}

.pagination-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.pagination-btn:hover:not(:disabled) {
  background: var(--highlight-color);
  border-color: var(--step-1-color);
  color: var(--step-1-color);
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-info {
  font-size: 0.95rem;
  color: var(--gray-text);
}

@media (max-width: 992px) {
  .preview-header {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }

  .preview-controls {
    width: 100%;
    justify-content: space-between;
  }

  .preview-table {
    font-size: 0.9rem;
  }
}

@media (max-width: 768px) {
  .preview-content {
    padding: 0 10px;
  }

  .preview-table th,
  .preview-table td {
    padding: 8px 10px;
  }

  .column-header {
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }

  .column-type {
    font-size: 0.7rem;
  }
}

@media (max-width: 576px) {
  .preview-header {
    padding: 15px;
  }

  .preview-title {
    font-size: 1.2rem;
  }

  .refresh-btn {
    padding: 8px 12px;
    font-size: 0.9rem;
  }

  .data-stats {
    gap: 10px;
  }

  .stat-item {
    font-size: 0.85rem;
  }

  .preview-table {
    font-size: 0.8rem;
  }
}
</style>
</write_to_file>
